<script setup lang="ts">
  import { reactive,watch } from 'vue';

  let user = reactive({
    name:'张三',
    age:18,
    gender:'男',
    hobbies:{info:['coding','eatting']}
  })

  function add(){
    user.age++;
  }

  function changeGender(){
    if(user.gender=='男'){
      user.gender='女'
    }else{
      user.gender='男'
    }
  }

  function changeUser(){
    Object.assign(user,{name:'李四',age:24,gender:'男', hobbies:{info:['play','sleep']}})
  }

  function changeHobbies(){
    // user.hobbies.info[0] = '睡觉'  // 须深监听
    user.hobbies.info.splice(0, 1, '睡觉');  // 须深监听
    // user.hobbies.info = ['睡觉', '运动'];  // 无需深监听
  }
  //引用变化vs内容变化：watch 主要监测的是引用变化。如果在数组内修改元素而没有改变引用，监听器不会被触发。

  watch(()=>user.age,(newValue)=>{
    console.log('监听到年龄的变化了',newValue)
  })

  watch(()=>user.hobbies.info,(newValue,oldValue)=>{
    console.log('监听到兴趣变化了',newValue,oldValue)  // 若是对象内容变化,newValue和oldValue是一样的
  },{deep:true})

</script>
<template>
    <div class="home">
        <h2>姓名:{{user.name}}</h2>
        <h2>年龄:{{user.age}}</h2>
        <h2>性别:{{user.gender}}</h2>
        <li v-for="h in user.hobbies.info">{{ h }}</li>
        <button @click="add">年龄+1</button>
        <button @click="changeGender">改变性别</button>
        <button @click="changeUser">换个人</button>
        <button @click="changeHobbies">换些爱好</button>
    </div>
</template>
<style scoped>
  h2{
    color: cadetblue;
  }
</style>